<template>

        <v-btn v-on:click="itemClick">
            <span>{{name}}</span>
            <v-icon>{{icon}}</v-icon>
        </v-btn>

</template>

<script>


    export default {
        name: "TabBarItem",
        data(){
            return {

            }
        },
        props: {
            path: {
                type: String,
                default: '/home'
            },
            name: {
                type: String,
            },
            icon: {
                type: String
            }
        },
        methods:{
            itemClick(){
                if (!this.isActive)
                    this.$router.replace(this.path)
                else
                    console.log('当前路径就是此页面 无需跳转')
            },
        },
        computed: {
            isActive(){
                return this.$route.path == this.path
            },

        }
    }
</script>

<style scoped>

</style>